<!--
 * @Author: lucky
 * @Date: 2021-06-29 16:48:24
 * @LastEditors: Mogy
 * @LastEditTime: 2021-07-03 19:45:43
 * @Description:  我的
-->
<template>
  <div>
    <div class="head">
      <div class="userBox">
        <div class="headPicture">
          <img :src="imageUrl" alt />
        </div>
        <div class="userName">
          <span>{{ userData.username }}</span>
          <span>我想有个家,一个厕所大的地方</span>
        </div>
        <ul class="userBoxBottom">
          <li>
            <span>已完成</span>
            <p>123</p>
          </li>
          <li>
            <span>待服务</span>
            <p>2</p>
          </li>
          <li>
            <span>已支付</span>
            <p>110</p>
          </li>
          <li>
            <span>金额</span>
            <p>5177</p>
          </li>
        </ul>
      </div>
    </div>
    <div>
      <van-cell @click="toCertification" title="实名认证" />
      <van-cell @click="toTakeMoney" title="提现" />
      <van-cell @click="toUserParams" title="个人信息" />
    </div>

    <div style="margin: 16px">
      <van-button round block type="info" @click="toLogOut" native-type="submit">退出登录</van-button>
    </div>
    <van-dialog @confirm="toGetMoney" v-model="showDialog" title="提现" show-cancel-button>
      <van-field v-model="number" type="number" label="金额" />
    </van-dialog>
  </div>
</template>

<script>
// import {logout} from "@/api/user";
import { info, submitAccountApply } from "@/api/userDetails";
import { getToken, removeToken, getinfo } from "@/utils/auth";
import { Toast } from "vant";
export default {
  data() {
    return {
      showDialog: false,
      userData: [],
      imageUrl: "",
      number: NaN,
    };
  },
  computed: {},
  methods: {
    async toGetMoney() {
      await submitAccountApply({
        money: this.number,
        applyType: "提现",
        userId: getinfo(),
      });
      Toast.success("提现成功");
    },
    //提现
    toTakeMoney() {
      this.showDialog = true;
    },

    // 获取用户信息
    async queryData() {
      let res = await info({
        token: getToken(),
      });
      this.userData = res.data;
      this.imageUrl = res.data.userFace;
      console.log(this.userData.id);
    },
    toCertification() {
      this.$router.push({
        path: "/Certification",
      });
    },
    toUserParams() {
      this.$router.push({
        path: "/UserParams",
      });
    },
    async toLogOut() {
      await removeToken();
      this.$router.push({
        path: "/login",
      });
    },
  },
  created() {
    this.queryData();
  },
  mounted() {},
};
</script>
<style scoped>
template {
  margin: 0;
  padding: 0;
}
.head {
  display: flex;
  background-color: #ffff;
  width: 100%;
  height: 300px;
  border-radius: 0 0 25px 25px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.userBox {
  margin-top: 20px;
  margin: 0 auto;
  height: 200px;
  width: 80%;
  border-radius: 20px;
  box-shadow: -8px -8px 16px 10px rgba(0, 0, 0, 0.15),
    8px 8px 16px 10px rgba(0, 0, 0, 0.15);
  background: #ffff;
}
.head .userBox .headPicture {
  position: relative;
  margin: -50px auto;
  width: 100px;
  height: 100px;
  /* background: linear-gradient(45deg,transparent, transparent 40%, #11110d); */
  border-radius: 50%;
  animation: animate 10s linear infinite;
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.head .userBox .headPicture img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.head .userBox .userName {
  margin-top: 35px;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.head .userBox .userName span {
  font-variant: small-caps;
  flex-basis: 30px;
  color: rgb(7, 43, 74);
}
.head .userBox .userBoxBottom {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
}
.head .userBox .userBoxBottom li {
  text-align: center;
}
.head .userBox .userBoxBottom li span {
  font-size: 11px;
  color: rgb(7, 43, 74);
}
.head .userBox .userBoxBottom li p {
  margin-top: 10px;
  font-size: 22px;
  color: #080b53;
}
</style>
